<template>
  <div class="login_container">
    <div class="login_form">
      <h1>Dcénzláb</h1>
      <span>by:且试新茶趁年华</span>
      <el-form
        style="margin-top: 20px; margin-bottom: 10px"
        :model="loginForm"
        :rules="rules"
        ref="loginForms"
      >
        <el-form-item prop="username">
          <el-input :prefix-icon="User" v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            :prefix-icon="Lock"
            v-model="loginForm.password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item class="btn_arr">
          <el-button>注册</el-button>
          <el-button :loading="loading" type="primary" @click="login"> 登录 </el-button>
        </el-form-item>
      </el-form>
      <span>PS:请使用PC端登录浏览</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { User, Lock } from "@element-plus/icons-vue";
import { ElNotification } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import { getTime } from "@/utils/time";

// 引入用户相关的仓库
import useUserStore from "@/store/modules/user";
let useStore = useUserStore();

// 获取路由器
let $router = useRouter();
let $route = useRoute();
// 定义变量，控制按钮加载的效果
let loading = ref(false);

// 获取el-form组件
let loginForms = ref();

let loginForm = reactive({
  username: "huangft",
  password: "111111",
});
// 登录按钮
const login = async () => {
  console.log("登录信息：", loginForms.value);
  await loginForms.value.validate();
  loading.value = true;
  try {
    // 可以书写.then的方法、语法
    await useStore.userLogin(loginForm).then((res: any) => {
      console.log("登录成功：", res);
      // 跳转到展示数据的首页
      let redirect: any = $route.query.redirect;
      console.log("重定向：", redirect);
      $router.push({ path: redirect || "/" });
      // 登录成功提示信息
      ElNotification({
        type: "success",
        message: "🎉欢迎回来",
        title: `👋Hi，${getTime()}好`,
      });
      loading.value = false;
    });
  } catch (error: any) {
    // 捕获登录失败的错误信息:这里还需要修改
    console.error("登录失败：", error.response.data.message);
    loading.value = false;
    // 登录失败提示信息
    ElNotification({
      type: "error",
      message: error.response.data.message,
    });
  }
};

// 自定义校验规则需要的函数
const validatorUsername = (rule: any, value: any, callback: any) => {
  // rule:即为校验规则对象
  // value:即为表单元素文本内容
  // callback:规则放行函数
  // 如果符合条件callback放行即为通过
  // 如果不符合条件callback方法,注入错误提示信息
  // console.log(callback)
  // /^\d{5,10}$/.test(value)
  if (value.length >= 5) {
    callback();
  } else {
    callback(new Error("账号长度至少五位"));
  }
};

const validatorPassword = (rule: any, value: any, callback: any) => {
  if (value.length >= 6) {
    callback();
  } else {
    callback(new Error("密码长度至少六位"));
  }
};

// 定义表单校验需要的配置对象
const rules = {
  username: [
    {
      trigger: "change",
      validator: validatorUsername,
    },
  ],
  password: [
    {
      trigger: "change",
      validator: validatorPassword,
    },
  ],
};
</script>
<script lang="ts">
export default {
  name: "Login",
};
</script>

<style scoped lang="scss">
.login_container {
  width: 100%;
  height: 100vh;
  background: url("@/assets/images/backgroundPicture.jpg") no-repeat;
  background-size: cover;
  position: relative;

  .login_form {
    position: absolute;
    width: 35%;
    box-sizing: border-box;
    padding: 40px;
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
    top: 25vh;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    overflow: hidden;

    .btn_arr {
      margin: 0 auto;
      width: 50%;
      display: flex;

      .el-button {
        flex: 1;
      }
    }

    h1 {
      color: white;
      font-weight: 700;
      font-size: 40px;
    }

    span {
      color: #eee;
      font-size: 14px;
    }
  }
}
</style>
